import React, { Component } from 'react'
import { Text, StyleSheet, View, Button} from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeScreen(prop) {
    return (
      <View style={[styles.container]}>
        <Text style={[styles.text]}>Home Screen</Text>
      </View>
    );
  }
  
  function NewsScreen(prop) {
      return (
        <View style={[styles.container]}>
          <Text style={[styles.text]}>News Screen</Text>
        </View>
      );
    }

export default class bottomTab extends Component {
  render() {
    return (
      <Tab.Navigator
        screenOptions={({ route })=>({
            tabBarIcon: ({ focused, color, size }) => {
                // 设置图标
                let iconName;
                if(route.name === 'Home'){
                    iconName = 'home';
                }else if(route.name === 'News'){
                    iconName = 'newspaper-o';
                }
                return <Icon name={iconName} size={size} color={color} />;
            }
        })}
        tabBarOptions={{
            activeTintColor: 'tomato',
            inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="News" component={NewsScreen} />
      </Tab.Navigator>
    )
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text:{
        fontSize: 20,
    }
})
